<template>
  <div class="card">
    <div class="row">
      <img v-if="image" class="img" :src="image" />
      <div style="display: flex; flex-direction: column">
        <div>
          <text class="titleText">{{ title }}</text>
        </div>
        <div style="flex-grow: 1"></div>
        <div>
          <text class="timeText">{{ time }}过期</text>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request';
import {
  defineComponent,
  reactive,
  ref,
  defineProps,
  getCurrentInstance,
} from 'vue';

import { useStore } from 'vuex';
// status : 0:未领取 1：已领取
//isSlelect
const props = defineProps([
  'title',
  'id',
  'image',
  'expireTime',
  'status',
  'isSlelect',
]);
</script>
<style lang="scss" scoped>
.img {
  width: 123px;
  height: 108px;
  padding-right: 10px;
}
.row {
  display: flex;
  flex-direction: row;
}
.card {
  height: 56px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  font-family: Roboto;
}
.titleText {
  color: rgb(102, 102, 102);
  font-size: 11px;
  text-align: left;
  font-family: PingFangSC-bold;
}

.timeText {
  color: rgb(153, 153, 153);
  font-size: 10px;
  text-align: left;
  font-family: PingFangSC-regular;
}
</style>
